<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box1 {
            width: 352px;
            height: 522px;
            border: 1px solid #333;
            position: relative;

        }

        .box1 .zuo {
            width: 350px;
            height: 350px;

        }



        .box1 .zuo img {
            width: 350px;
            height: 350px;
            float: left;
        }

        .box1 .you {
            width: 352px;
            height: 54px;
            padding-top: 10px;
        }

        .box1 .you ol {
            width: 290px;
            height: 54px;
            margin: auto;

        }

        .box1 .you ol li {
            margin: 0 2px;
            float: left;
        }

        .box1 .you ol li img {
            border: 2px solid #fff;
            width: 50px;
            height: 50px;

        }

        .rightbox {
            position: absolute;
            top: 0;
            left: 356px;
            width: 400px;
            height: 400px;
            border: 1px solid red;
            display: none;
            overflow: hidden;
        }

        .rightbox img {
            width: 1200px;
            height: 1200px;
            position: absolute;

        }

        .yellow {
            background-color: yellow;
            opacity: 0.5;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            pointer-events: none;
        }
    </style>
</head>

<body>
   <!--  <h1>放大镜</h1>
    <p>
        1.建立盒子box，设置盒子标签。引入图片img 。
        2.设置盒子样式，图片样式。
        3.获取盒子中的所有标签的元素
        4.设置触碰小图的时候，上面大图随之变化
        5.设置触碰小图的时候，右边的大图也跟随着变化
        6.设置鼠标触碰上面的大图，图上的黄框随之出现
        7.当黄框在大图上移动时右边的图成比例变化
        8.设置鼠标离开上面的大图 右边的大图和黄色的定位框消消失

    </p> -->
    <div class="box1">
        <div class="zuo">
            <img src="./img/小姐姐1.jpeg" alt="" class="img1">

        </div>
        <div class="you">
            <ol>
                <li>
                    <p></p>
                    <div class="kuang"></div>
                    <img src="./img/小姐姐1.jpeg" alt="">
                </li>
                <li><img src="./img/小姐姐2.jpeg" alt=""></li>
                <li><img src="./img/小姐姐3.jpeg" alt=""></li>
                <li><img src="./img/小姐姐4.jpeg" alt=""></li>
                <li><img src="./img/小姐姐5.jpeg" alt=""></li>


            </ol>
        </div>
        <div class="yellow"></div>
    </div>
    <div class="rightbox">
        <img src="./img/小姐姐1.jpeg" alt="">
        <!--      <img src="./img/小姐姐2.jpeg" alt="" class="img2">
        <img src="./img/小姐姐3.jpeg" alt="" class="img2">
        <img src="./img/小姐姐4.jpeg" alt="" class="img2">
        <img src="./img/小姐姐5.jpeg" alt="" class="img2"> -->
    </div>

    <script>
    // 1.获取box1中zuo 里面所有img 的元素 为boxing
       var boximg = document.querySelector(".box1 > .zuo > img");
        //获取所有的li 元素

       var lis = document.querySelectorAll("li");
       // 获取.rightbox 里面的img 元素
       var rbosimg = document.querySelector(".rightbox > img")
       // 获取 .rightbox的元素
        var rbox = document.querySelector(".rightbox")
         // 获取 .yellow的元素
        var yellow = document.querySelector(".yellow")
          // 获取 .zuo的元素
        var box = document.querySelector(".zuo")

        for (let i = 0; i < lis.length; i++) {
           // 设置触碰小图的时候，上面大图随之变化
            lis[i].onclick = function () {
                // 触碰小图的时候 上面的发图随之变化
                rbosimg.src = lis[i].querySelector('img').src;
                // 触碰到小图 的时候右边的图随之变化
                boximg.src = lis[i].querySelector('img').src;
                //触碰到小图的时候 右边的图显示
                rbox.style.display = "block";

            }

        }
        // 当鼠标放在zuo框上时
        box.onmouseenter = function () {
            // 设置鼠标触碰上面的大图 图上的黄图定位框出现
            yellow.style.display = "block";
             // 设置鼠标触碰上面的大图 右边的图定位框出现
            rbox.style.display = "block";

            /*  box.onmousemove = function (e) {
                 var x = e.pageX - box.getBoundingClientRect().x; // x为鼠标当前x位置（e.pageX）- 外边盒子距离浏览器边缘的位置
                 var y = e.pageY - box.getBoundingClientRect().y; // 同上
                 var yellowX= x - yellow.getBoundingClientRect().x / 2; // 原本的框框是左上角随着鼠标移动 maskX是x - mask.getBoundingClientRect().x / 2(也就是框框的一半)
                 var yellowY = y - yellow.getBoundingClientRect().y / 2; // 同上 使鼠标在框框的中间
                 if (yellowX<= 0) {
                     yellowX = 0;
                 } else if (yellowX >= 250) {
                     yellowX = 250
     
                 }
                 if (yellowY <=0) {
                     yellowY = 0;
                 } else if (yellowY >= 250) {
                     yellowY = 250;
                 }
                 yellow.style.left = yellowY  + "px";
                 yellow.style.top = yellowY + "px";
     
     
             } */


        }// 设置鼠标离开上面的大图 右边的大图和黄色的定位框消失
        box.onmouseleave = function () {
            yellow.style.display = "none";
            rbox.style.display = "none";
        }

        // 设置鼠标移动事件
        box.onmousemove = function (e) {
            // 7获取鼠标距离当前触发事件标签的位置
            // e.offsetX;
            // e.offsetY;
            // e.layerY; 
            // e.layerY;
            // 8获取标签距离浏览器窗口的偏移量
            var x = box.getBoundingClientRect().x;
            var y = box.getBoundingClientRect().y;
            // 9鼠标距离浏览器窗口的偏移量 - 标签距离浏览器窗口的偏移量 == 鼠标到标签的偏移量
            var l = e.clientX - x - yellow.offsetWidth / 2;
            var t = e.clientY - y - yellow.offsetHeight / 2;
            l = l < 0 ? 0 : l;
            t = t < 0 ? 0 : t;
            var maxW = box.offsetWidth - yellow.offsetWidth;
            var maxH = box.offsetHeight - yellow.offsetHeight;
            l = l > maxW ? maxW : l;
            t = t > maxH ? maxH : t;
            //设置yellow 的移动
            yellow.style.left = l + "px";// 给框框赋值 值会变化 随鼠标位置变化
            yellow.style.top = t + "px";
            // 给大图赋值 值会变化 随鼠标位置变化 也就是 随着框框变化
            rbosimg.style.left = -l * 3 + 'px';
            rbosimg.style.top = -t * 3 + 'px';
        }

    </script>



</body>

</html>